<template>
    <el-card style="width: 60%;margin: 10px auto 30px">
        <h1 style="margin-bottom: 20px;text-align: center">商家入驻</h1>
        <div style="width: 50%;margin: 30px auto">
        <el-form :model="store" ref="ruleForm"  label-position="top" label-width="60%">
            <el-form-item
                label="店铺名称"
                prop="shopname"
                label-width="200px"
                :rules="{
                  required: true, message: '店铺名称不能为空', trigger: 'blur'
                }">
                <el-input v-model="store.shopname" style="width: 300px"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item
                        label="店铺经营许可证"
                        prop="certificate"
                        :rules="{
                          required: true, message: '请添加店铺经营许可证', trigger: 'blur'
                        }">
                        <el-image :src="store.shoppicture" alt="" style="width: 160px;height: 160px">
                            <div slot="error" style="background-color:#F5F7FA;text-align: center;height: 100%;position: relative">
                                <p style="display:block;top: 60px;left:31px;position: absolute;color: #99a9bf">店铺经营许可证</p>
                            </div>
                        </el-image>
                        <el-upload class="upload-demo" ref="upload"
                                   action=""
                                   accept="image/jpg,image/jpeg,image/png"
                                   :file-list="fileList"
                                   :auto-upload="false"
                                   :on-change="mychange2"
                                   :limit="1"
                                   :on-success="uploadsuccess" :before-upload="beforUpload"
                                   :on-error="uploadError">
                            <el-button slot="trigger" size="small" type="primary">更改图片</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="店铺照片"
                        prop="shoppicture"
                        :rules="{
                          required: true, message: '请添加店铺照片', trigger: 'blur'
                        }">
                        <el-image :src="store.certificate" alt="" style="width: 160px;height: 160px">
                            <div slot="error" style="background-color:#F5F7FA;text-align: center;height: 100%;position: relative">
                                <p style="display:block;top: 60px;left:31px;position: absolute;color: #99a9bf">请上传店铺照片</p>
                            </div>
                        </el-image>
                        <el-upload class="upload-demo" ref="upload"
                                   action=""
                                   accept="image/jpg,image/jpeg,image/png"
                                   :file-list="fileList"
                                   :auto-upload="false"
                                   :on-change="mychange"
                                   :limit="1"
                                   :on-success="uploadsuccess" :before-upload="beforUpload"
                                   :on-error="uploadError">
                            <el-button slot="trigger" size="small" type="primary">更改图片</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item
                label="店铺地址"
                prop="address"
                :rules="{
                  required: true, message: '店铺地址不能为空', trigger: 'blur'
                }">
                <el-input v-model="store.address" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即入驻</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        </div>

        <el-dialog
            title="提示"
            :visible.sync="show"
            width="30%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :show-close="false"
            center>
            <p style="text-align: center">请登录</p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="goLogin">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>

<script >
import users from "@/api/users";
export default {
    data(){
        return{
            store:{
                shopname:'',
                certificate:'',
                shoppicture:'',
                address:'',
                state:'',
                uid:'',
                score:'',
            },
            fileList:[],
            show:false
        }
    },
    methods:{
        submitForm(formName) {
            let that = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    users.addStore(this.store).then(response=>{
                        let i = response.data.data;
                        if (i>0){
                            this.$message({
                                message:'恭喜您入驻平台，请静候审核结果',
                                type:'success'
                            })
                            that.$router.push('/mainShow');
                        }else{
                            this.$message({
                                message:'提交失败，请稍后提交',
                                type:'warning'
                            })
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        mychange(file,fileList){
            this.getBase64(file.raw).then(res=>{
                this.store.certificate = res
            })
        },
        mychange2(file,fileList){
            this.getBase64(file.raw).then(res=>{
                this.store.shoppicture = res
            })
        },
        getBase64(file){
            return new Promise(function (resolve, reject) {
                const reader = new FileReader()
                let imgResult = ''
                reader.readAsDataURL(file)
                reader.onload = function () {
                    imgResult = reader.result
                }
                reader.onerror = function (error) {
                    reject(error)
                }
                reader.onloadend = function () {
                    resolve(imgResult)
                }
            })
        },
        uploadsuccess(response){
            this.flag = true;
            this.$refs.upload.clearFiles();
            this.open3();
        },
        uploadError(){
            this.flag = false;
            this.open4();
        },
        beforUpload(file){
            if(!(file.type==='image/png')&&!(file.type==='image/jpeg')&&!(file.type==='image/jpg')){
                this.$message.error('只能上传图片')
                return false
            }
        },
        goLogin(){
            this.$router.push('/mainShow')
        }
    },
    created(){
        if (JSON.parse(sessionStorage.getItem('users')) == null){
            this.show = true;
        }else{
            this.store.uid = JSON.parse(sessionStorage.getItem('users')).id
        }
    }
}
</script>

<style scoped>

</style>